<template>
	<view>
		
		<!-- toast -->
		<u-toast ref="uToast"></u-toast>
		<!--  轮播 -->
		<u-swiper :height="450" :list="list" indicator indicatorMode="line" circular class="u-swiper" @click="hrefList" ></u-swiper>
		<!-- 分类 -->
		<view class="shop_list">
			<view class="shop_item" v-for="(item, i) in shopList" :key="i" @click="shopClick(i)">
				<image :src="item.image_src" mode=""></image>
			</view>
		</view>
		<!-- 楼层 -->
		<view class="floor_box">
			<view class="floor_list" v-for="(item, i) in floorList" :key="i">
				<image :src="item.floor_title.image_src" mode="" class="floor_tit"></image>
				<view class="floor_img_box">
					<!-- 左侧大图 -->
					<view class="left_img_box">
						<image :src="item.product_list[0].image_src" mode="widthFix" :style="{width: item.product_list[0].image_width + 'rpx'}" @click="gotoPage(item.product_list[i].navigator_url)"></image>
					</view>
					<!-- 右侧四小图 -->
					<view class="right_img_box">
						<view class="right_img_item" v-for="(item2, i2) in item.product_list" v-if="i2 != 0">
							<image :src="item2.image_src" mode="widthFix" :style="{width:item2.image_width + 'rpx'}" @click="gotoPage(item2.navigator_url)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<tab-bar></tab-bar>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				swiperList: [],// 轮播图所有数据
				list:[] ,// 渲染图片数据
				shopList: [] ,// 商品分类数据
				page: ["index", "list", "shoping", "user"],
				floorList: []
			};
		},
		onLoad() {
			this.getSwiperList() // 轮播图
			this.getShopList() // 商品列表
			this.getFloorList() // 楼层数据
		},
		
		onReady() {
			this.showToast()
		},
		methods: {
			// 获取轮播图数据
			async getSwiperList() {
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/home/swiperdata')
				this.swiperList = res.message
				res.message.forEach((item, i) => {
					this.list.push(item.image_src)
				})
				// console.log(this.swiperList,this.list);

				if (res.meta.status !== 200) {
					return this.showToast()
				}
			},
			async getShopList(){
				const {data: res} = await uni.$http.get('/api/public/v1/home/catitems')
				this.shopList = res.message
			},
			// 获取楼层数据
			async getFloorList(){
				const {data: res} = await uni.$http.get('/api/public/v1/home/floordata')
				res.message.forEach((item) => {
					this.floorList.push(item)
				})
				console.log("楼层数据：",res)
				console.log(this.floorList)
			},
			// 点击轮播图跳转子包
			hrefList(e){
				console.log(e)
				uni.navigateTo({
					url: `../../subpkg/shoping_detail/shoping_detail?goods_id=${this.swiperList[e].goods_id}`
				})
			},
			// 点击分类图获取商品参数
			gotoPage(e){
				e = e.split('?')[1]
				// console.log(e)
				uni.navigateTo({
					url: `../../subpkg/shoping_detail/shoping_detail?${e}`
				})
			},
			// 点击shop列表跳转对应页面
			shopClick(e){
				console.log(this.page[e])
				uni.switchTab({
					url: `/pages/${this.page[e]}/${this.page[e]}`
				})
			},
			
			// 显示totast
			showToast(params) {
				this.$refs.uToast.show({
					type: 'success',
					title: '成功主题',
					message: "你访问的小程序端",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
					complete() {
						
					}
				})
			}
			
		}
	};
</script>


<style lang="scss">
	.shop_list{
		display: flex;
		justify-content: space-around;
		margin: 15px 0;
	}
	.shop_item image{
		width: 128rpx;
		height: 140rpx;
	}
	// .floor_box{padding-bottom: 80rpx;}
	.floor_box .floor_tit{width: 100%;height: 60rpx;}
	.floor_box .right_img_box{display: flex;flex-wrap: wrap;justify-content: space-around;}
	.floor_box .floor_img_box{display: flex;padding-left: 10rpx;}
	.floor_box .right_img_item{display: inline-block;}
</style>